import { Component } from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreator } from './store';
import './index.scss';

class Login extends Component {
    render() {
        const { isLogin, loginBtn } = this.props;

        if (isLogin) {
            // 如果已登录，重定向到首页
            return <Redirect to="/" />;
        } else {
            return (
                <div className="LoginWrapper">
                    <div className="logo">
                        <img src={require('../../statics/images/logo.png').default} alt="" />
                    </div>
                    <div className="container">
                        <div className="main fr">
                            <h4 className="title">登录</h4>
                            <div className="form-container">
                                <input
                                    placeholder="帐号: admin"
                                    type="text"
                                    ref={input => {
                                        this.account = input;
                                    }}
                                />
                                <input
                                    placeholder="密码: 123456"
                                    type="password"
                                    ref={input => {
                                        this.password = input;
                                    }}
                                />
                                <button
                                    type="button"
                                    onClick={() => {
                                        loginBtn(this.account.value, this.password.value);
                                    }}
                                >
                                    登录
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    }
}

const mapStateToProps = state => {
    return {
        isLogin: state.getIn(['login', 'isLogin']),
    };
};

const mapDispatchToProps = disptch => {
    return {
        loginBtn(account, password) {
            disptch(actionCreator.login(account, password));
        },
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);
